import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../tool/keepAliveWrapper.dart';
import '../demo/message.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  // Initialize the TabController
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this); // tab数量
    _tabController.addListener(() {
      // 监听Tab切换
      if (_tabController.animation!.value == _tabController.index) {
        print("当前选中的是第${_tabController.index}个tab");
      }
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(40),
        child: AppBar(
          elevation: 1,
          backgroundColor: Colors.white,
          title: SizedBox(
            height: 40,
            child: TabBar(
              controller: _tabController,
              // 控制器
              labelColor: Colors.blue,
              isScrollable: true,
              // 是否可滚动
              indicatorColor: Colors.red,
              // 指示器颜色
              indicatorWeight: 2,
              // 指示器的高度
              indicatorPadding: EdgeInsets.all(0),
              // 指示器内边距
              indicatorSize: TabBarIndicatorSize.label,
              // 设置指示器的大小为标签的大小
              labelStyle: TextStyle(fontSize: 16),
              unselectedLabelStyle: TextStyle(fontSize: 14),
              //
              // indicator: BoxDecoration(
              //   // 指示器装饰
              //   borderRadius: BorderRadius.circular(10), // 圆角
              //   color: Colors.blueAccent, // 颜色
              // ),
              onTap: (index) {
                // 点击tab回调，只能监听点击事件，不能监听滑动事件
                print("点击了第$index个tab");
              },
              tabs: const [
                Tab(text: "基础"),
                Tab(text: "热门"),
                Tab(text: "视频"),
                Tab(text: "效果"),
              ],
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          KeepAliveWrapper(
            child: ListView(
              children: [
                ListTile(
                  title: Text("基础路由传值"),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) {
                          return MessagePage(title: "路由传值");
                        },
                      ),
                    );
                  },
                ),
                ListTile(title: Text("Dialog示例"),onTap: (){
                  //Navigator.pushNamed(context, '/dialog');
                  Get.toNamed('/dialog');
                },),
                ListTile(title: Text("关注-3")),
                ListTile(title: Text("关注-4")),
                ListTile(title: Text("关注-5")),
                ListTile(title: Text("关注-6")),
                ListTile(title: Text("关注-7")),
                ListTile(title: Text("关注-8")),
                ListTile(title: Text("关注-9")),
                ListTile(title: Text("关注-10")),
                ListTile(title: Text("关注-11")),
                ListTile(title: Text("关注-12")),
                ListTile(title: Text("关注-13")),
                ListTile(title: Text("关注-14")),
                ListTile(title: Text("关注-15")),
                ListTile(title: Text("关注-16")),
                ListTile(title: Text("关注-17")),
                ListTile(title: Text("关注-18")),
                ListTile(title: Text("关注-19")),
                ListTile(title: Text("关注-20")),
              ],
            ),
          ),
          KeepAliveWrapper(
            child: ListView(
              children: [
                ListTile(title: const Text("gridViewDemo"),onTap: () {
                  Navigator.pushNamed(context, '/gridView');
                }),
                const ListTile(title: Text("热门-2")),
                const ListTile(title: Text("热门-3")),
              ],
            ),
          ),
          KeepAliveWrapper(
            child: ListView(
              children: const [
                ListTile(title: Text("视频-1")),
                ListTile(title: Text("视频-2")),
                ListTile(title: Text("视频-3")),
              ],
            ),
          ),
          KeepAliveWrapper(
            child: ListView(
              children: [
                ListTile(title: Text("图片模糊效果"),
                  onTap: () {
                    Navigator.pushNamed(context, '/blur');
                  }
                  ),
                ListTile(title: Text("图片弹出飞入"),
                    onTap: () {
                      Navigator.pushNamed(context, '/pictureFlyIn');
                    }
                ),
                ListTile(title: Text("其他-3")),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
